<template>
	<view>
		<!-- 搜索 -->
		<view class="search-box"><uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-bar></view>
		<!-- 搜索列表 -->
		<view class="sugg-list" v-if="searchResults.length !== 0">
			<view class="sugg-item" v-for="(item, i) in searchResults" :key="i" @click="gotoDetail(item.goods_id)">
				<view class="goods-name">{{ item.goods_name }}</view>
				<uni-icons type="arrowright" size="18"></uni-icons>
			</view>
		</view>
		<!-- 历史记录 -->
		<view class="history-box" v-else>
			<!-- 标题区域 -->
			<view class="history-title">
				<text>搜索历史</text>
				<uni-icons type="trash" size="17" @click="clean"></uni-icons>
			</view>
			<!-- 列表区域 -->
			<view class="history-list"><uni-tag :text="item" v-for="(item, i) in histories" :key="i" class="unitag" 
			@click="gotoGoodsList(item)"></uni-tag></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 延时器的 timerId
			timer: null,
			// 搜索关键词
			kw: '',

			// 商品列表
			searchResults: [],
			//历史搜索假数据
			historyList: []
		};
	},
	onLoad() {
		this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]');
	},
	methods: {
		// 输入方法
		input(e) {
			// 清除 timer 对应的延时器
			clearTimeout(this.timer);
			// 重新启动一个延时器，并把 timerId 赋值给 this.timer
			this.timer = setTimeout(() => {
				// 如果 500 毫秒内，没有触发新的输入事件，则为搜索关键词赋值
				this.kw = e;
				this.getSearchResults();
			}, 500);
		},
		//调用列表接口
		async getSearchResults() {
			if (this.kw === '') {
				this.searchResults = [];
				return;
			}

			const { data: res } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.kw });
			if (res.meta.status !== 200) return uni.$showMsg();
			this.searchResults = res.message;

			this.saveSearchHistory();
		},
		//保存搜索关键词的方法
		saveSearchHistory() {
			// this.historyList.push(this.kw)

			const set = new Set(this.historyList);
			set.delete(this.kw);
			set.add(this.kw);

			this.historyList = Array.from(set);

			// 对搜索历史数据，进行持久化的存储
			uni.setStorageSync('kw', JSON.stringify(this.historyList));
		},
		clean() {
			this.historyList = [];
			uni.setStorageSync('kw', '[]');
		},
		//跳转历史记录
		gotoGoodsList(kw){
			uni.navigateTo({
				url:'../goods_list/goods_list?query='+kw
			})
		},
		// 跳转详情
		gotoDetail(goods_id) {
			uni.navigateTo({
				url: '../goods/goods?goods_id=' + goods_id
			});
		}
	},
	computed: {
		histories() {
			return [...this.historyList].reverse();
		}
	}
};
</script>

<style>
.uni-searchbar {
	display: flex;
	flex-direction: row;
	position: relative;
	padding: 16rpx;
	background-color: #c00000;
}
.search-box {
	position: sticky;
	top: 0;
	z-index: 999;
}

/* 搜索列表 */
.sugg-list {
	padding: 0 12rpx;
}
.sugg-item {
	font-size: 30rpx;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #c00000;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.goods-name {
	// 文字不允许换行（单行文本）
	white-space: nowrap;
	// 溢出部分隐藏
	overflow: hidden;
	// 文本溢出后，使用 ... 代替
	text-overflow: ellipsis;
	margin-right: 10rpx;
}

/* 历史记录的样式 */
.history-box {
	padding: 0 32rpx;
}
.history-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80rpx;
	font-size: 32rpx;
	border-bottom: 1rpx solid #c7c7c7;
	margin-bottom: 6rpx;
}
.history-list {
	display: flex;
	flex-wrap: wrap;
}
.uni-tag{
	color:#5270F9 !important;
	margin-right: 24rpx;
	margin-top: 24rpx;
	border-radius: 32rpx;
	border: 0 !important;
	background: #EDF0FF !important;
}
</style>
